<template>
	<view class="main">
		<view class="card" v-if="detailData.id">
			<view class="worderInfo">
				<image :src="detailData.avatar" class="image"></image>
				<view style="flex: 1;">
					<view class="row-one">
						<view>{{ detailData.name }}</view>
						<view class="button">工龄 {{detailData.year}}</view>
					</view>
					<view class="row-tow">
						<b v-if="detailData.is_vip">VIP</b>
						<span>{{ detailData.type_name }}</span>
					</view>
					<view class="row-three">
						<b>{{ detailData.address_area }}</b>
					</view>
				</view>
			</view>
			<view class="flex-box">
				<view class="flex-item">
					<view class="">{{distance?'距离您'+distance+'km':'未知距离'}}</view>
					<view class="">距离</view>
				</view>
				<view class="flex-item">
					<view class="">{{ detailData.fen }}分</view>
					<view class="">服务评分</view>
				</view>
			</view>
		</view>
		<view class="tab">
			<view>
				<span v-for="(item, index) in list1" @click="clickTab(index)" :ref="'tab' + index"
					:id="index == 0 ? 'active' : ''">{{ item.name }}</span>
			</view>
		</view>
		<view class="tab-item">
			<view v-if="tab == 0" class="tab-item1">
				<view class="title">
					<image src="@/static/images/default/circle.png"></image>
					<h2>{{ detailData.name }}个人简介</h2>
				</view>
				<p>{{ detailData.desc }}</p>
			</view>
			<view v-else-if="tab == 1" class="tab-item2">
				<image v-for="(item, ind) in detailData.images_data" :src="item"></image>
			</view>
			<view v-else class="tab-item3">
				<view class="evaluation" v-for="(item, ind) in detailData.user_ping_data" :key="ind">
					<view class="">
						<image :src="item.avatar"></image>
						<span>{{ item.nickname }}</span>
						<span>{{ item.create_time_text }}</span>
					</view>
					<view class="">
						{{ item.content }}
					</view>
				</view>
			</view>
		</view>
		<u-button text="立即预约" @click="showPopup" id="atOnce"></u-button>
		<u-popup :show="show" ref="vanP" position="bottom" :round="true" closeOnClickOverlay @close="show = false">
			<view class="popup-box">
				<h3>{{ detailData.name }}</h3>
				<p>{{ detailData.address_area }}</p>
				<view class="row-tow">
					<b v-if="detailData.is_vip">VIP</b>
					<span>工龄{{ detailData.year }}</span>
					<span>{{ detailData.type_name }}</span>
				</view>
				<u-form label-width='100'>
					<u-form-item label="预约日期" prop="obj.date" ref="item1" @click="showCalendar = true">
						<u-input v-model="obj.date" placeholder="请选择预约日期" disabled />
					</u-form-item>
					<u-form-item label="上门时间" prop="obj.time" ref="item1" @click="showPicker = true">
						<u-input v-model="obj.time" placeholder="请选择上门时间" disabled />
					</u-form-item>
					<u-form-item label="服务内容" prop="obj.serve" ref="item1">
						<u-input v-model="obj.serve" placeholder="请选择服务内容" />
					</u-form-item>
					<u-form-item label="联系电话" prop="obj.phone" ref="item1">
						<u-input v-model="obj.phone" placeholder="请输入联系电话" />
					</u-form-item>
					<u-form-item label="上门地址" prop="obj.address" ref="item1">
						<u-input v-model="obj.address" placeholder="请选择上门地址" />
					</u-form-item>

				</u-form>

				<u-button text="立即预约" id="atOnce" @click="submit"></u-button>
			</view>
		</u-popup>
		<u-calendar :show="showCalendar" @confirm="onConfirm" mode="single" color="#fe7010"></u-calendar>
		<u-datetime-picker :show="showPicker" mode="time" @confirm="timeConfirm" @cancel="showPicker = false"
			confirmColor="#fe7010"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list1: [{
						name: '简介'
					},
					{
						name: '工匠秀'
					},
					{
						name: '用户评价'
					}
				],
				tab: 0,
				show: false,
				showPicker: false,
				showCalendar: false,
				obj: {
					date: '',
					time: '',
					serve: '',
					phone: '',
					address: ''
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					}
				},
				// phone: /^[3-9]{1}[0-9]{9}$/
				detailData: {},
				distance: 0, //距离
			};
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(option) {
			this.distance = option.distance
			this.getData(option.id);
		},
		methods: {
			// 请求详情数据
			async getData(id) {
				let data = {
					id
				};
				await uni.request({
					url: '/worker/get_info',
					method: 'POST',
					data,
					success: (res) => {
						if (res.res.code == 1) {
							this.detailData = res.res.data;
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			},
			clickTab(index) {
				this.tab = index;
				let arr = [0, 1, 2];
				arr = arr.filter((item) => {
					return item !== index;
				});
				arr.forEach((item) => {
					this.$refs['tab' + item][0].id = '';
				});
				this.$refs['tab' + index][0].id = 'active';
			},
			showPopup() {
				if (!this.user.isLogin) {
					 uni.navigateTo({
						url: `/pages/user/auth/auth`
					})
					return false
				}
				this.show = true;
			},
			onConfirm(date) {
				this.obj.date = date[0];
				this.showCalendar = false;
			},
			timeConfirm(time) {
				this.obj.time = time.value;
				this.showPicker = false;
			},
			validator(val) {
				return /^1[34578]\d{9}$/.test(val);
			},

			async submit() {
				
				let data = {
					worker_user_id: this.detailData.user_id,
					day: this.formatDate(this.obj.date),
					time: this.obj.time,
					server_content: this.obj.serve,
					mobile: this.obj.phone,
					address: this.obj.address
				};
				console.log(data);
				// return;
				await uni.request({
					url: '/worker/add_order',
					method: 'POST',
					data,
					success: (res) => {
						if (res.res.code == 1) {
							this.show = false
							this.$wanlshop.to('/pages/user/record/reservation')
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			},
			formatDate(dateString) {
				const date = dateString.split('/');
				if (date[1] < 10) {
					date[1] = '0' + date[1];
				}
				if (date[2] < 10) {
					date[2] = '0' + date[2];
				}
				return date.join('-')
			}
		}
	};
</script>

<style scoped lang="stylus">
	.main {
		// height: calc(100vh - 200rpx);
		overflow: hidden;
	}

	#atOnce {
		position: absolute;
		bottom: 20rpx;
		left: 34rpx;
		width: 682rpx !important;
		height: 88rpx !important;
		background-color: #fe6600;
		border-radius: 88rpx;
		color: #fff;
		font-weight: 700;
		// margin-right: 24rpx;
	}

	#atOnce .u-button__text {
		display: inline-block !important;
		width: 100%;
		margin: 0;
		height: 88rpx !important;
		font-size: 30rpx !important;
	}

	#atOnce span {
		line-height: 88rpx !important;
	}

	.card {
		position: relative;
		width: 690rpx;
		height: 340rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		background-image: -webkit-linear-gradient(top, #FFF3ED, #FFFFFF);
		border-radius: 10rpx;

	}

	.u-transition {
		height: 100% !important;
		width: 192rpx;
		float: left;
	}



	.worderInfo {
		display: flex;
		align-items: center;
		padding: 20rpx;

		.image {
			width: 144rpx !important;
			height: 144rpx !important;
			margin-right: 20rpx
		}

		.row-one .button {
			display: inline-block !important;
			width: 152rpx !important;
			height: 56rpx !important;
			line-height: 56rpx;
			text-align: center;
			background-color: #fe6600;
			border-radius: 56rpx;
			color: #fff;
			font-weight: 700;
			margin-right: 24rpx;
		}

	}

	.row-one {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* margin-right: 24rpx; */
	}

	.row-one b {
		font-size: 28rpx;
	}

	.row-one span {
		display: inline-block;
		float: right;
		margin-right: 32rpx;
		color: #999;
		font-size: 24rpx;
	}

	.row-tow {
		margin-top: 6rpx;
	}

	.row-tow b {
		display: inline-block;
		background-color: #fe6600;
		color: #fff;
		width: 50rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		font-size: 20rpx;
		font-weight: 400;
	}

	.row-tow span {
		display: inline-block;
		padding: 2rpx 10rpx;
		background-color: #fff0e5;
		color: #fe7010;
		margin-left: 6rpx;
		font-size: 20rpx;
	}

	.row-three {
		margin-top: 26rpx;
	}

	.row-three b {
		margin-right: 40rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
		line-height: 56rpx;
	}

	.flex-box {
		width: 100%;
		display: flex;
		padding-top: 30rpx;
		border-top: 2rpx dashed #F7F8FC;
		justify-content: space-around;
		position: absolute;
		bottom: 0;
	}

	.flex-item {
		width: 112rpx;
		width: 50%;
		height: 84rpx;
		/* background-color: aquamarine; */
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 22rpx;
	}

	.flex-item>view:first-child {
		color: #999;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.tab {
		margin-top: 34rpx;
		width: 611rpx;
		height: 56rpx;
		margin-left: 68rpx;

		view {
			span {
				margin-right: 170rpx;
				display: inline-block;
				font-size: 29rpx;
				// background: red
			}

			span:last-child {
				margin-right: 0;
			}
		}
	}

	#active {
		border-bottom: 2px solid #FE6600;
		color: #FE6600;
		font-size: 32rpx;
	}

	.tab-item {
		width: 690rpx;
		height: 660rpx;
		background: #fff;
		margin-left: 30rpx;
		border-radius: 10rpx;

		.tab-item1 {
			padding-top: 44rpx;

			.title {
				margin-left: 34rpx;
				height: 44rpx;

				image {
					width: 30rpx;
					height: 28rpx;
					float: left
				}

				h2 {
					float: left;
					font-size: 32rpx;
					height: 44rpx;
					margin-top: -10rpx;
					margin-left: 18rpx;
				}
			}

			p {
				font-size: 26rpx;
				width: 614rpx;
				margin-left: 38rpx;
				line-height: 42rpx;
				color: #666;
			}

		}

		.tab-item2 {
			padding-top: 44rpx;
			margin-left: 38rpx;

			image {
				width: 188rpx;
				height: 148rpx;
				margin-right: 26rpx;
			}
		}

		.tab-item3 {
			padding-top: 44rpx;
			margin-left: 38rpx;

			.evaluation {
				width: 628rpx;
				height: 104rpx;
				// background: green;
				margin-bottom: 30rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					float: left;
				}

				span {
					display: block;
					margin-top: 14rpx;
					float: left;
					font-size: 28rpx;
					color: #333;
				}

				span:last-child {
					float: right;
					font-size: 26rpx;
					color: #999;
				}

				view {
					height: 56rpx;
				}

				view:last-child {
					margin-top: 12rpx;
					font-size: 26prx;
					color: #999;
				}
			}
		}
	}

	.popup-box {
		padding-top: 32rpx;
		padding-left: 42rpx;
		padding-right: 30rpx;
		min-height: 900rpx;

		h3 {
			font-size: 30rpx;
		}

		p {
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #999;
		}

		// width: 100%;
		// height: 750prx;
		// background: red;
		.u-field__body>.u-field__control {
			text-align: right;
		}
	}
</style>